<template>
	<view class="wrapper">
		<uni-nav-bar leftText="取消" rightText="完成" title="设置标签" @clickLeft="$back" @clickRight="friendGroupUpdateGroupUserList"></uni-nav-bar>
		<view class="tag_name tag_box">标签名字</view>
		<input type="text" v-model="group.groupName" class="tag_txt" />
		<view class="tag_member tag_box">标签成员({{ group.userIdList.length }})</view>
		<view class="new_tag_box" @tap="choiceFriend">
			<image src="../../static/user/yuanjialan.png" mode="aspectFill" class="yuanjia"></image>
			<view class="build_tag">添加新成员</view>
		</view>
		<view class="member_set">
			<dl-swipe class="swipe_box" v-for="(val, index) in goupList" :key="val.userId">
				<view class="member_box" slot="main">
					<dimg :src="val.userId | avatar" class="member_head"></dimg>
					<view class="member_name">{{ val.nickname }}</view>
				</view>
				<view class="btn_box center cfff f30" slot="btn"><view class="delete center" @tap="remove(index)">删除</view></view>
			</dl-swipe>
		</view>
	</view>
</template>

<script>
import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue';
export default {
	data() {
		return {
			group: '',
			goupList: []
		};
	},
	components: { uniNavBar },
	onShow() {
		let choicelist = getApp().globalData.contactList;
		choicelist.map(item => {
			this.goupList.push({
				nickname: item.toNickname,
				userId: item.toUserId
			});
		});
		getApp().globalData.contactList=[]
	},
	onLoad(e) {
		this.group = JSON.parse(e.group);
		this.userGet();
	},
	methods: {
		remove(index){
			this.goupList.splice(index,1)
		},
		// 添加新成员
		choiceFriend(){
			this.$open('../friend/choiceFriend?list='+JSON.stringify(this.group.userIdList))
		},
		// 获取用户昵称和头像
		userGet() {
			this.group.userIdList.map(item => {
				this.$ajax(this.apiList.userGet, {
					userId: item
				}).then(res => {
					this.goupList.push(res.data);
				});
			});
		},
		// 修改标签
		friendGroupUpdateGroupUserList() {
			let userIdListStr=[]
			this.goupList.map(item => {
				userIdListStr.push(item.userId)
			})
			this.$ajax(this.apiList.friendGroupUpdateGroupUserList, {
				groupId: this.group.groupId,
				userIdListStr: userIdListStr.join(','),
				groupName:this.group.groupName
			}).then(res => {
				this.$sToast('修改成功');
				this.$back(1, 1500);
			});
		}
	}
};
</script>

<style>
.wrapper {
	background-color: #f3f3f3;
}
.tag_txt {
	height: 104rpx;
	background: rgba(255, 255, 255, 1);
	font-size: 30rpx;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	padding-left: 30rpx;
	border-top: 1rpx solid rgba(224, 224, 224, 1);
}
.tag_box {
	font: 26rpx/74rpx '';
	font-weight: 500;
	color: rgba(102, 102, 102, 1);
	border-top: 1rpx solid rgba(224, 224, 224, 1);
	padding-left: 30rpx;
}
.new_tag_box {
	height: 104rpx;
	background: rgba(255, 255, 255, 1);
	display: flex;
	flex-direction: row;
	align-items: center;
	border-top: 1rpx solid rgba(224, 224, 224, 1);
	border-bottom: 1rpx solid rgba(224, 224, 224, 1);
	margin-bottom: 29rpx;
}
.yuanjia {
	width: 38rpx;
	height: 38rpx;
	margin: 0 20rpx 0 30rpx;
}
.build_tag {
	font: 30rpx/30rpx '';
	font-weight: 500;
	color: rgba(2, 151, 254, 1);
}
.member_set {
	border-top: 1rpx solid rgba(224, 224, 224, 1);
	border-bottom: 1rpx solid rgba(224, 224, 224, 1);
}
.member_box {
	height: 116rpx;
	background-color: #ffffff;
	display: flex;
	flex-direction: row;
	align-items: center;
}
.member_head {
	width: 76rpx;
	height: 76rpx;
	border-radius: 50%;
	margin: 0 30rpx;
	overflow: hidden;
}
.member_name {
	flex: 1;
	font-size: 32rpx;
	line-height: 116rpx;
	font-weight: 500;
	color: rgba(51, 51, 51, 1);
	border-bottom: 1rpx solid rgba(224, 224, 224, 1);
}
.last_bor {
	border: none;
}
.btn_box {
	position: absolute;
	left: 100%;
	top: 0;
}
.delete {
	width: 160rpx;
	height: 116rpx;
	background: rgba(255, 53, 67, 1);
}
.swipe_box {
	position: relative;
	transition: all 0.3s;
}
</style>
